<template>
  <div class="order-number_mod" :class="themeClass">
    <v-nav :title="$t('OrderNumber.Spot Trading')"></v-nav>
    <div class="order-number_mod_box">
      <van-sticky :offset-top="44">
        <div class="order-number_mod_box_tabs">
          <van-tabs class="moomoo-tabs" v-model="active" color="#DAAB51" @click="onRefresh">
            <van-tab :title="$t('OrderNumber.all')"></van-tab>
            <van-tab :title="$t('OrderNumber.entrust')"></van-tab>
            <van-tab :title="$t('OrderNumber.Deal done')"></van-tab>
            <van-tab :title="$t('OrderNumber.Order canceled')"></van-tab>
          </van-tabs>
        </div>
      </van-sticky>
      <div class="order-number_mod_box_data">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
            <div class="every" v-for="(item, index) in orderList" :key="index">
              <div class="every-title">
                <p>
                  <span :style="{ color: item.direction == 1 ? '#0BBA99' : '#EE3E57' }">
                    {{ item.direction == 1 ? $t('OrderNumber.buy') : $t('OrderNumber.sell') }}
                  </span>
                  <span>{{ item.symbol }}</span>
                </p>
                <van-tag v-if="item.status == 1" type="success" size="medium">{{ $t('OrderNumber.completed') }}</van-tag>
                <van-tag v-if="item.status == 2" type="danger" size="medium" @click="revokeSpotOrder(item.id)">{{ $t('OrderNumber.Click to cancel order') }}</van-tag>
                <van-tag v-if="item.status == 3" type="warning" size="medium">{{ $t('OrderNumber.Take the initiative to cancel orders') }}</van-tag>
                <van-tag v-if="item.status == 4" type="primary" size="medium">{{ $t('OrderNumber.Forced order cancellation') }}</van-tag>
              </div>
              <van-divider />
              <div class="every-content">
                <p>
                  <span>{{ $t('OrderNumber.Order No') }}</span>
                  <span>{{ item.order_no }}</span>
                </p>
                <p>
                  <span>{{ $t('OrderNumber.Commission time') }}</span>
                  <span>{{ item.trust_time }}</span>
                </p>
                <p>
                  <span>{{ $t('OrderNumber.End Time') }}</span>
                  <span v-if="item.status != 2">{{ item.end_time }}</span>
                  <span v-else>-</span>
                </p>
              </div>
              <div class="every-content">
                <p>
                  <span>{{ $t('OrderNumber.Delegate type') }}</span>
                  <span>{{ item.trust_type == 1 ? $t('OrderNumber.market price') : $t('OrderNumber.limit price') }}</span>
                </p>
                <p>
                  <span>{{ `${$t('OrderNumber.Amount of commission')}(${item.symbol_pricing})` }}</span>
                  <span>{{ item.trust_amount }}</span>
                </p>
                <p>
                  <span>{{ $t('OrderNumber.Order price') }}</span>
                  <span v-if="item.trust_type == 2">{{ item.trust_price }}</span>
                  <span v-else>-</span>
                </p>
              </div>
              <div class="every-content">
                <p>
                  <span>{{ $t('OrderNumber.Transaction price') }}</span>
                  <span v-if="item.status == 1">{{ item.final_price }}</span>
                  <span v-else>-</span>
                </p>
                <p>
                  <span>{{ `${$t('OrderNumber.trading volume')}(${item.symbol_base})` }}</span>
                  <span v-if="item.status == 1">{{ item.final_amount }}</span>
                  <span v-else>-</span>
                </p>
                <p>
                  <span>{{ `${$t('OrderNumber.handling fee')}(${item.symbol_base})` }}</span>
                  <span v-if="item.status == 1">{{ item.commission }}</span>
                  <span v-else>-</span>
                </p>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderNumber',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      orderList: [],
      active: 0,
      isDayTime: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    // 急速持仓数据
    async getSpotList() {
      await this.$https.get('/coin/getSpotList?page=' + this.page + '&status=' + this.active).then(res => {
        if (this.refreshing) {
          this.orderList = []
          this.refreshing = false
        }
        this.orderList = [...this.orderList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    // 上拉加载处理函数
    onLoad() {
      this.getSpotList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    },
    // 撤单
    revokeSpotOrder(id) {
      this.$dialog
        .confirm({
          title: this.$t('info.info17'),
          confirmButtonText: this.$t('info.info10'),
          cancelButtonText: this.$t('info.info11'),
          confirmButtonColor: 'rgb(218, 171, 81)',
          cancelButtonColor: 'rgb(218, 171, 81)',
          theme: 'round-button'
        })
        .then(() => {
          this.$https.post('/coin/revokeSpotOrder', { id: id }).then(res => {
            if (res != undefined && res.code == 1) {
              this.onRefresh()
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
